<template>
  <div class="swipercontainer">
    <swiper class="swiper" :options="swiperOption" ref="mySwiper">
      <swiper-slide class="swiperItem" v-for="(item,idx) in iconListNew" :key="idx">
        <Icons class="icon2" v-for="item1 in item" :data="item1" :key="item1.id"></Icons>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import Icons from "./Icons";
export default {
  name: "Swiper",
  components:{
    swiper,
    swiperSlide,
    Icons

  },
  data(){
    return{
      swiperOption: {
        loop: false,
        autoplay:false,
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: false //允许分页点击跳转
        }
      },
      iconList:[{id:0,imgUrl:'https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg',title:'充值'},
        {id:1,imgUrl:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg',title:'超市'},
        {id:2,imgUrl:'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg',title:'数码电器'},
        {id:3,imgUrl:'https://m15.360buyimg.com/mobilecms/jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg',title:'服饰'},
        {id:4,imgUrl:'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg',title:'生鲜'},
        {id:5,imgUrl:'https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg',title:'充值'},
        {id:6,imgUrl:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg',title:'超市'},
        {id:7,imgUrl:'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg',title:'数码电器'},
        {id:8,imgUrl:'https://m15.360buyimg.com/mobilecms/jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg',title:'服饰'},
        {id:9,imgUrl:'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg',title:'生鲜'},
        {id:10,imgUrl:'https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg',title:'充值'},
        {id:11,imgUrl:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg',title:'超市'},
        {id:12,imgUrl:'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg',title:'数码电器'},
        {id:13,imgUrl:'https://m15.360buyimg.com/mobilecms/jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg',title:'服饰'},]
    }
  },
  computed:{
    iconListNew(){
      let iconList=[[],[]]
      this.iconList.forEach((item,idx)=>{
        if(idx/8<1){
          iconList[0].push(item)
        }else {
          iconList[1].push(item)
        }
      })
      return iconList
    },
  },
  methods:{},
  mounted() {

  }
}
</script>

<style lang="less" scoped>
.swipercontainer{
  height: 155px;
  .swiper{
    height: 100%;
    .swiperItem{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .icon2{
        width: 25%;

      }
    }
    .swiper-pagination{
      position: absolute;
      bottom: 0px;
    }
  }
}

</style>